<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div>cst handsome</div>
    <script>
      /* const list = {
        init: function () {
          this.message = "hello";
          this.bindEvent();
        },
        bindEvent: function () {
          const divEl = document.querySelector("div");
          divEl.onclick = this.show.bind(this);
        },
        show: function (e) {
          console.log(e.target, this);
        },
      };

      list.init(); */

      /* const value = 0;
      const obj = {
        value: 1,
      };
      function show(name, age) {
        console.log(this.value);
        console.log(name, age);
      } */

      // const newShow = show.bind(obj);
      // newShow("anni", 12);

      const obj = {
        value: 1,
      };
      Function.prototype.newBind = function (target) {
        target = target ?? window;
        const self = this;
        const args = [].slice.call(arguments, 1);
        const temp = function () {};
        const F = function () {
          const _arg = [].slice.call(arguments, 0);
          return self.apply(
            this instanceof temp ? this : target,
            args.concat(_arg)
          );
        };

        temp.prototype = this.prototype;
        F.prototype = new temp();
        return F;
      };

      function show(name, age) {
        console.log(this.value);
        console.log(name, age);
      }
      function FatherShow() {}
      FatherShow.prototype.lastName = "CHEN";
      show.prototype = new FatherShow();
      const newShow = show.newBind(obj, "cst");
      newShow("anni", 12);
      new newShow(18);
    </script>
  </body>
</html>
